{php $main_off = 1;}

{template 'header'}
</div>

{if $album['type'] == 1}
<script type="text/javascript" src="../addons/stralbum/template/mobile/360view.js"></script>
<style>
body,div,h1,h2,h3,span,p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000000
}
/* fullscreen */
html {
	height: 100%;
}

body {
	height: 100%;
	margin: 0px;
	overflow: hidden;
	font-size: 10pt;
	background: #ffffff; /* disable scrollbars */
}

table,tr,td {
	font-size: 10pt;
	border-color: #777777;
	background: #dddddd;
	color: #000000;
	border-style: solid;
	border-width: 2px;
	padding: 5px;
	border-collapse: collapse;
}

h1 {
	font-size: 18pt;
}

h2 {
	font-size: 14pt;
}

.warning {
	font-weight: bold;
}
/* fix for scroll bars on webkit & Mac OS X Lion */
::-webkit-scrollbar {
	background-color: rgba(0, 0, 0, 0.5);
	width: 0.75em;
}

::-webkit-scrollbar-thumb {
	background-color: rgba(255, 255, 255, 0.5);
}

a {
	text-decoration: none;
}

.view_change {
	position: fixed;
	z-index: 1000;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 42px;
	background-color: #262626;
	border: 1px solid #000000;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
	text-align: center;
}

.view_change a {
	line-height: 23px;
	display: block;
	font-size: 16px;
	color: #fefefe;
	line-height: 42px;
	text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.8);
}

.view_change a::before {
	content: "";
	display: inline-block;
	width: 23px;
	height: 23px;
	line-height: 23px;
	margin-right: 5px;
	margin-top: -5px;
	vertical-align: middle;
	background:
		url();
	background-size: auto 23px;
	background-repeat: no-repeat;
}
</style>

<div id="container" style="width:100%;height:100%;">
	This content requires HTML5/CSS3, WebGL, or Adobe Flash Player Version 9 or higher.
</div>
<script type="text/javascript">
	if (ggHasHtml5Css3D() || ggHasWebGL()) {
		pano=new pano2vrPlayer("container");
		skin=new pano2vrSkin(pano);
		pano.readConfigUrl('{$_W['siteroot']}{$url}&gettype=xml');
	} else{
		alert("not support 360view");
	}
</script>
<noscript>
	<p><b>Please enable Javascript!</b></p>
</noscript>
<div class='view_change'>
	<a href='javascript:history.go(-1);'>返回</a>
</div>

{else}

<link rel="stylesheet" type="text/css" href="../addons/stralbum/template/mobile/photo.mobile.css" media="all" />
<link rel="stylesheet" type="text/css" href="../addons/stralbum/template/mobile/photoswipe.mobile.css" media="all" />
<script type="text/javascript" src="../addons/stralbum/template/mobile/jquery.imagesloaded.js"></script>
<script type="text/javascript" src="../addons/stralbum/template/mobile/jquery.wookmark.min.js"></script>
<script type="text/javascript" src="../addons/stralbum/template/mobile/klass.min.js"></script>
<script type="text/javascript" src="../addons/stralbum/template/mobile/code.photoswipe.min.js"></script>
<script type="text/javascript" src="../addons/stralbum/template/mobile/jquery.lazyload.js"></script>

<style>
img{width:100%!important;}
.show-more{text-align:center; margin:10px 0;}
.show-more a{display:inline-block; color:#555; font-size:13px; text-shadow:0 1px 1px #fff; box-shadow:0 1px 1px 0 rgba(0,0,0,0.2) inset; padding:8px 50px; background:#DDD; text-decoration:none;}
</style>

<div id="photo" style='height:auto'>
	<div class="body">
		<div class="qiandaobanner">
			<a href="#">
			    {if empty($_W['styles']['toppic'])}
				<img src="../addons/stralbum/template/images/albums_head.jpg" alt="" style="max-height:200px;"/>
                {else}
                <img src="{php echo toimage($_W['styles']['toppic'])}" alt="" style="max-height:200px;"/>
                {/if}
			</a>
		</div>
		<div id="main" style='height:auto'>
			<ul id="gallery" class="gallery">
				{loop $result['list'] $row}
				<li style="">
					<a href="{php echo toimage($row['attachment'])}">
						<img src="{php echo toimage($row['attachment'])}" alt="{$row['title']}">
					</a>
				</li>
				{/loop}
			</ul>
		</div>
	</div>
	<div class="show-more"><a href="javascript:;" onclick="loadRecPage();" class="img-rounded pager">显示更多</a></div>
</div>

<script type="text/javascript">
var pindex = 1;
function loadRecPage() {
	pindex = parseInt(pindex) + 1;
	var pager = $('.pager');
	pager.html('正在加载数据...');
	var url = "{php echo $this->createMobileUrl('detailmore')}";
	$.get(url, {'page': pindex, 'id': '{$id}'}, function(html){
		if (html.indexOf('li') > - 1) {
			$('#gallery').append(html);
			//瀑布流处理
			$('#gallery').imagesLoaded(function() {
				var options = {
				autoResize: false,
				container: $('#main'),
				offset: 4,
				itemWidth: 150
				};
				var handler = $('#gallery li');
				handler.wookmark(options);
			});
			var myPhotoSwipe = $("#gallery a").photoSwipe({loop:false});

			pager.html('显示更多');
		} else {
			pager.html('已全部加载');
		}
	});
}

(function(window){
	document.addEventListener('DOMContentLoaded', function(){
		var PhotoSwipe = window.Code.PhotoSwipe;
		var options = {loop:false},
		instance = PhotoSwipe.attach( window.document.querySelectorAll('#gallery a'), options );
	}, false);
})(window);

//下面是瀑布流js
$(function() {
  $('#gallery').imagesLoaded(function() {
	// Prepare layout options.
	var options = {
	  autoResize: false, // This will auto-update the layout when the browser window is resized.
	  container: $('#main'), // Optional, used for some extra CSS styling
	  offset: 4, // Optional, the distance between grid items
	  itemWidth: 150 // Optional, the width of a grid item
	};
	// Get a reference to your grid items.
	var handler = $('#gallery li');
	// Call the layout function.
	handler.wookmark(options);
  });
});
</script>
{/if}
{template 'footer'}